import { useEffect } from 'react';
import { Route, Link, useLocation, useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

import { Layout, Menu, Popconfirm } from 'antd';
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined,
} from '@ant-design/icons';

// home组件的子组件
import { Board } from './Board/Board';
import { Article } from './Article/Article';
import { Publish } from './Publish/Publish';
// actions
import { getUserInfo } from '@/store/actions/user';

import styles from './Home.module.scss';
import { logout } from '@/store/actions';

const { Header, Sider } = Layout;

export const Home = (props) => {
  // hooks
  const location = useLocation();
  const dispatch = useDispatch();
  const history = useHistory();

  // 从redux 中获取数据
  const user = useSelector((state) => state.user);

  // 页面渲染后，发起请求
  useEffect(() => {
    // 异步action
    dispatch(getUserInfo());
  }, [dispatch]);

  // menu菜单路由匹配函数
  const selectedKey = (pathname) => {
    if (pathname.startsWith('/home/publish')) return '/home/publish';
    if (pathname.startsWith('/home/article')) return '/home/article';
    // home 要放到最后
    if (pathname.startsWith('/home')) return '/home';
  };

  // 事件处理函数
  const handleLogout = () => {
    // 推出登录action
    console.log('logout');
    dispatch(logout());
    // 跳转到登录页面
    history.push('/login');
  };

  return (
    <div className={styles.root}>
      <Layout style={{ height: '100%' }}>
        {/* 顶部导航 */}
        <Header className="header">
          <div className="logo">左侧logo</div>
          <div className="user-info">
            <span className="user-name">{user.name}</span>
            <span className="user-logout">
              <Popconfirm
                title="是否确认退出？"
                okText="退出"
                cancelText="取消"
                overlayInnerStyle={{ borderRadius: 24 }}
                onConfirm={handleLogout}
              >
                <LogoutOutlined /> 退出
              </Popconfirm>
            </span>
          </div>
        </Header>
        {/* 下方的左右布局 */}
        <Layout>
          {/* 左侧的导航 */}
          <Sider>
            <Menu
              theme="dark"
              // 如果是函数动态计算，要使用 selectedKeys
              selectedKeys={[selectedKey(location.pathname)]}
              // defaultSelectedKeys={[selectedKey(location.pathname)]}
            >
              <Menu.Item key={'/home'} icon={<HomeOutlined />}>
                <Link to={'/home'}>数据管理</Link>
              </Menu.Item>
              <Menu.Item key={'/home/article'} icon={<DiffOutlined />}>
                <Link to={'/home/article'}>内容管理</Link>
              </Menu.Item>
              <Menu.Item key={'/home/publish'} icon={<EditOutlined />}>
                <Link to={'/home/publish'}>发布文章</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          {/* 右侧将来现实的内容 */}
          <Layout style={{ padding: 24, overflowY: 'auto' }}>
            <Route exact path={'/home'} component={Board} />
            <Route path={'/home/article'} component={Article} />
            <Route path={'/home/publish/:id?'} component={Publish} />
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
};
